import React, { Component, cloneElement, Children } from 'react'
// cloneElement 复制一个指定的元素(对象)
// Children 用来进行对this.props.children对象进行遍历的，内部会自动帮我们去判断是否是数组还是对象

class Child extends Component {
  state = {
    num: 100
  }
  render() {
    // 模拟具名插槽
    let { children } = this.props
    let child = Children.map(children, (node) => {
      return cloneElement(node, {
        onClick: () => {
          console.log(this.state.num)
          node.props.onClick()
        }
      })
    })
    console.log(child)

    return (
      <div>
        <h3>我是Child组件</h3>
        <hr />
        {child}
      </div>
    )
  }
}

class App extends Component {
  state = {
    title: '你好我是插槽'
  }

  clickHandle = () => {
    console.log('app')
  }

  render() {
    return (
      <div>
        <h2>App组件</h2>
        <hr />
        <Child>
          <div onClick={this.clickHandle}>{this.state.title}</div>
          <div onClick={this.clickHandle}>{this.state.title}</div>
        </Child>
      </div>
    )
  }
}

export default App
